<template>
    <div class="login-container">
      <el-card class="login-card">
        <div class="login-header">
          <h2 class="login-title">用户注册</h2>
          <p class="login-subtitle">请填写您的注册信息</p>
        </div>
        
        <el-form 
          :model="registerForm" 
          label-width="0"
          class="login-form"
          ref="registerFormRef"
        >
          <el-form-item prop="username">
            <el-input 
              v-model="registerForm.username" 
              placeholder="请输入用户名" 
              prefix-icon="el-icon-user"
              size="large"
              @blur="validateUsername"
            />
            <transition name="el-zoom-in-top">
              <span v-if="!isUsernameValid" class="error-message">
                {{ usernameErrorMessage }}
              </span>
            </transition>
          </el-form-item>
  
          <el-form-item prop="password">
            <el-input 
              v-model="registerForm.password" 
              type="password" 
              placeholder="请输入密码" 
              prefix-icon="el-icon-lock"
              size="large"
              show-password
              @blur="validatePassword"
            />
            <transition name="el-zoom-in-top">
              <span v-if="!isPasswordValid" class="error-message">
                {{ passwordErrorMessage }}
              </span>
            </transition>
          </el-form-item>
  
          <el-form-item prop="confirmPassword">
            <el-input 
              v-model="registerForm.confirmPassword" 
              type="password" 
              placeholder="请再次输入密码" 
              prefix-icon="el-icon-lock"
              size="large"
              show-password
              @blur="validateConfirmPassword"
            />
            <transition name="el-zoom-in-top">
              <span v-if="!isConfirmPasswordValid" class="error-message">
                {{ confirmPasswordErrorMessage }}
              </span>
            </transition>
          </el-form-item>
  
          <!-- <el-form-item prop="userType">
            <el-radio-group v-model="registerForm.userType" size="large">
              <el-radio :label="1" border>管理员</el-radio>
              <el-radio :label="5" border>普通用户</el-radio>
            </el-radio-group>
          </el-form-item> -->
  
          <el-form-item>
            <el-button 
              type="primary" 
              @click="handleRegister" 
              class="login-button"
              size="large"
              :loading="loading"
            >
              立即注册
            </el-button>
          </el-form-item>
        </el-form>
        
        <div class="login-footer">
          <el-link type="info" @click="goToLogin">已有账号？去登录</el-link>
        </div>
      </el-card>
      
      <div class="login-bg">
        <div class="bg-circle bg-circle-1"></div>
        <div class="bg-circle bg-circle-2"></div>
        <div class="bg-circle bg-circle-3"></div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import { useRouter } from 'vue-router'
  import axios from 'axios'
  import request from '../utils/request'
  
  const router = useRouter()
  const loading = ref(false)
  const registerFormRef = ref(null)
  
  // 注册表单数据
  const registerForm = ref({
    username: '',
    password: '',
    confirmPassword: '',
    roleId: 6 // 默认选择普通用户
  })
  
  // 用户名验证状态和错误信息
  const isUsernameValid = ref(true)
  const usernameErrorMessage = ref('')
  
  // 密码验证状态和错误信息
  const isPasswordValid = ref(true)
  const passwordErrorMessage = ref('')
  
  // 确认密码验证状态和错误信息
  const isConfirmPasswordValid = ref(true)
  const confirmPasswordErrorMessage = ref('')
  
  // 手动验证用户名
  const validateUsername = () => {
    const { username } = registerForm.value
    if (!username) {
      isUsernameValid.value = false
      usernameErrorMessage.value = '请输入用户名'
    } else if (username.length < 3 || username.length > 20) {
      isUsernameValid.value = false
      usernameErrorMessage.value = '长度在 3 到 20 个字符'
    } else {
      isUsernameValid.value = true
      usernameErrorMessage.value = ''
    }
  }
  
  // 手动验证密码
  const validatePassword = () => {
    const { password } = registerForm.value
    if (!password) {
      isPasswordValid.value = false
      passwordErrorMessage.value = '请输入密码'
    } else if (password.length < 6 || password.length > 20) {
      isPasswordValid.value = false
      passwordErrorMessage.value = '长度在 6 到 20 个字符'
    } else {
      isPasswordValid.value = true
      passwordErrorMessage.value = ''
    }
    // 验证密码后也验证确认密码
    validateConfirmPassword()
  }
  
  // 手动验证确认密码
  const validateConfirmPassword = () => {
    const { password, confirmPassword } = registerForm.value
    if (!confirmPassword) {
      isConfirmPasswordValid.value = false
      confirmPasswordErrorMessage.value = '请再次输入密码'
    } else if (confirmPassword !== password) {
      isConfirmPasswordValid.value = false
      confirmPasswordErrorMessage.value = '两次输入的密码不一致'
    } else {
      isConfirmPasswordValid.value = true
      confirmPasswordErrorMessage.value = ''
    }
  }
  
  // 注册处理函数
  const handleRegister = async () => {
    validateUsername()
    validatePassword()
    validateConfirmPassword()
  
    if (!isUsernameValid.value || !isPasswordValid.value || !isConfirmPasswordValid.value) {
      return
    }
  
    loading.value = true
    
    try {
      const response = await request.post('/user/create', {
        username: registerForm.value.username,
        password: registerForm.value.password,
        roleId: registerForm.value.roleId
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      alert(response.data)
      alert(registerForm.value.password)
      alert(registerForm.value.roleId)
      if (response.code === 200) {
        ElMessage.success('注册成功')
        // 注册成功后跳转到登录页面
        router.push('/')
      } else {
        ElMessage.error(response.message || '注册失败')
      }
    } catch (error) {
      console.error('注册错误:', error)
      if (error.response) {
        if (error.response.data && error.response.message) {
          ElMessage.error(error.response.message)
        } else {
          ElMessage.error(`请求错误: ${error.response.code}`)
        }
      } else if (error.request) {
        ElMessage.error('网络错误，请检查您的连接')
      } else {
        ElMessage.error('请求出错，请稍后重试')
      }
    } finally {
      loading.value = false
    }
  }
  
  // 跳转到登录页面
  const goToLogin = () => {
    router.push('/')
  }
  </script>
  
  <style scoped>
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f7fa;
    position: relative;
    overflow: hidden;
  }
  
  .login-card {
    width: 420px;
    padding: 40px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    z-index: 1;
    position: relative;
  }
  
  .login-header {
    text-align: center;
    margin-bottom: 36px;
  }
  
  .login-title {
    margin-bottom: 8px;
    color: #303133;
    font-size: 24px;
    font-weight: 600;
  }
  
  .login-subtitle {
    margin: 0;
    color: #909399;
    font-size: 14px;
  }
  
  .login-form {
    margin-top: 20px;
  }
  
  .login-button {
    width: 100%;
    margin-top: 10px;
    letter-spacing: 2px;
  }
  
  .error-message {
    color: #f56c6c;
    font-size: 12px;
    margin-top: 4px;
    display: block;
    line-height: 1;
  }
  
  .login-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  
  .login-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  
  .bg-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  }
  
  .bg-circle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
  }
  
  .bg-circle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
  }
  
  .bg-circle-3 {
    width: 150px;
    height: 150px;
    bottom: 100px;
    right: 100px;
  }
  
  /* 响应式调整 */
  @media (max-width: 480px) {
    .login-card {
      width: 90%;
      padding: 30px 20px;
    }
    
    .login-title {
      font-size: 20px;
    }
    
    .el-radio-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .el-radio {
      margin-right: 0 !important;
    }
  }
  </style>